<template>
<div>
  <router-view></router-view>
  <!--  分割线-->
  <el-divider></el-divider>
  <!--垂直分割-->
  <span style="font-weight:bold"><span style="color:royalblue">|</span>&nbsp;日志编辑</span>
    <!--  分割线-->
    <el-divider></el-divider>
  <!--查询客户表格对话框-->
  <el-dialog title="客户选择" :visible.sync="dialogTableVisible">
    <!--      客户选择高级查询-->
    <el-form :inline="true" :model="formInlineLog" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInlineLog.client" placeholder="委托人(客户)"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="getLogClient">查询</el-button>
      </el-form-item>
    </el-form>
    <!--  查询表单-->
    <el-table ref="multipleTable"
              :data="clientData"
              border
              @row-click="clickRow">
      <el-table-column property="client" label="委托人(客户)"></el-table-column>
      <el-table-column property="phone" label="电话号码"></el-table-column>
      <el-table-column property="sex" label="性别"></el-table-column>
      <el-table-column property="countId" label="案件"></el-table-column>
      <el-table-column property="addtime" label="登记时间"></el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :page-sizes="[2, 4, 6, 8]"
        :total="pageDataLog.total"
        :page-size="formInlineLog.pageNum"
        @size-change="handleSizeChangeLog"
        @current-change="handleCurrentChangeLog">
    </el-pagination>
  </el-dialog>
    <!--添加服务记录表单-->
    <el-form :model="logJobForm" :rules="rules" :label-position="labelPosition" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="日志类型:" prop="logTypePid">
            <el-select clearable style="width: 100%;" v-model="logJobForm.logTypePid" @change="erSelect" placeholder="请选择日志类型">
              <el-option
                  v-for="item in logTypeData"
                  :key="item.id"
                  :label="item.logTypeLogname"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细类别:" prop="logtypeId">
            <el-select clearable style="width: 100%" v-model="logJobForm.logtypeId" placeholder="请选择详细类别">
              <el-option
                  v-for="item in logTypeErData"
                  :key="item.id"
                  :label="item.logTypeLogname"
                  :value="item.id+''">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="客户名称:" prop="client">
            <el-input type="hidden" v-model="logJobForm.clientId"></el-input>
            <el-input v-model="logJobForm.client">
              <el-button type="text" style="padding-right:15px" slot="suffix" @click="selectClient">
                选择客户
              </el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="开始时间:" prop="joblogStartTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="logJobForm.joblogStartTime"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间:" prop="joblogEnddTime">
            <el-date-picker type="date" placeholder="选择日期" v-model="logJobForm.joblogEnddTime"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="自报时长(时):" prop="joblogReportedTime">
            <el-date-picker
                style="width: 100%;"
                v-model="logJobForm.joblogReportedTime"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自报时长(分):" prop="joblogUpdatetime">
            <el-date-picker
                style="width: 100%;"
                v-model="logJobForm.joblogUpdatetime"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="相关文件:">
            <!--              joblogFile-->
            <el-upload
                style="height: 10px"
                ref="upload"
                action=""
                :http-request="ss"
                :before-upload="beforeUpload"
                :limit=1>
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公开状态:" prop="joblogStatus">
            <el-radio-group v-model="logJobForm.joblogStatus">
              <el-radio label="Y" >公开</el-radio>
              <el-radio label="N" >不公开</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="height: 20px"></div>
      <el-row>
        <el-col :span="24">
          <el-form-item label="工作描述:" prop="joblogText">
            <el-input type="textarea" v-model="logJobForm.joblogText"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="addBut">
      <el-button type="primary" plain @click="addlogType">提交</el-button>
      <el-button type="primary" plain @click="goBack">返回</el-button>
    </div>
</div>
</template>

<script>

export default {
  name: "insertLogJob.vue",
  data(){
    return{
      id:this.$route.params.id,
      dialogTableVisible: false,//查询客户对话框默认关闭
      clientData: [],//查询客户表格对话框
      logTypeData: [],//日志类型下拉框
      logTypeErData: [],
      pageDataLog: {},// 存储返回的分页数据
      labelPosition: 'top',//表单顶部对齐
      //高级查询客户选择表单
      formInlineLog: {
        pageId: 1,
        pageNum: 2,
      },
      //添加服务记录对话框表单
      logJobForm: {
        joblogStatus:"Y",
        flie: '',
        flieName: '',
        joblogFile: "", // 文件上传地址
      },
      rules: {
        logTypePid: [
          {required: true, message: '请选择日志类型', trigger: 'change'}
        ],
        logtypeId: [
          {required: true, message: '请选择详细类别', trigger: 'blur'}
        ],
        client: [
          {required: true, message: '请填写客户名称', trigger: 'change'}
        ],
        joblogStartTime: [
          {type: 'date', required: true, message: '请选择开始日期', trigger: 'change'}
        ],
        joblogEnddTime: [
          {type: 'date', required: true, message: '请选择结束日期', trigger: 'change'}
        ],
        joblogReportedTime: [
          {required: true, message: '请输入时间(时)', trigger: 'blur'}
        ],
        joblogUpdatetime: [
          {required: true, message: '请输入时间(分)', trigger: 'blur'}
        ],
        joblogStatus: [
          {required: true, message: '请选择公开状态', trigger: 'change'}
        ],
        joblogText: [
          {required: true, message: '请描述工作', trigger: 'blur'}
        ],
      },
    }
  },
  created() {
    this.getLogType();
    this.getLogClient();
    this.getAdmmClientUserId();
  },
  methods:{
    //根据ID查询客户信息
    getAdmmClientUserId() {
      this.$http
          .get("admmClientUser/{id}",{params:{id:this.id}})
          .then((res) => {
            this.logJobForm = res.data.data[0];
            this.logJobForm.logTypePid=1003;
            this.erSelect()
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //添加服务记录
    addlogType() {
      let fileFormData = new FormData();//点击添加按钮先上传文件 成功回调获取文件地址并添加道列表
      fileFormData.append('file', this.logJobForm.flie, this.logJobForm.flieName);
      let requestConfig = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      // joblogFile
      this.$http.post("file", fileFormData, requestConfig)
          .then(res => {
            this.logJobForm.joblogFile = res.data.data
            this.$http.post("logJob", this.logJobForm)
                .then(
                    this.$notify({
                      type: "success",
                      message: "添加成功"
                    }),
                    this.$router.push("AdmmClientUser")
                )
                .catch(function (error) {
                  console.log(error);
                });
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //高级查询客户选择信息
    getLogClient() {
      this.$http
          .get("log",
              {params: this.formInlineLog})
          .then((res) => {
            this.clientData = res.data.data.list;
            this.pageDataLog = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //获取查询选择客户选中的数据
    clickRow(row) {
      this.logJobForm.clientId=row.client
      this.dialogTableVisible=false
    },
    //点击选择客户打开客户选择表格对话框
    selectClient() {
      this.dialogTableVisible = true;
      this.getLogClient();
    },
    //查询日志类型下拉框数据
    getLogType() {
      this.$http.get('logType')
          .then((res) => {
            this.logTypeData = res.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //查询日志类型下拉框数据 详情
    erSelect() {
      this.$http.get(`logType/${this.logJobForm.logTypePid}`)
          .then((res) => {
            this.logTypeErData = res.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //页面显示文件上传数据
    ss() {},
    //上传文件之前的钩子
    beforeUpload(file) {
      this.logJobForm.flie = file;
      this.logJobForm.flieName = file.name;
    },
    //显示几页
    handleSizeChangeLog(val) {
      this.formInlineLog.pageNum = val;
      this.getLogClient();
    },
    //每页显示几条
    handleCurrentChangeLog(val) {
      this.formInlineLog.pageId = val;
      this.getLogClient();
    },
    //返回主页面
    goBack() {
      this.$router.push("AdmmClientUser")
    }
  }
}
</script>

<style scoped>
.addBut{
  text-align: center;
}
</style>